<template>
  <div  :style="{pointerEvents: url ? 'all' : 'none', background: url ? 'black' : 'transparent'}" class="video-wrapper">
    <video
      ref="video"
      id="videoElement"
      autoplay
      muted
      :style="{opacity: url ? 1.0: 0, pointerEvents: url ? 'all' : 'none'}"
      controls
    />
  </div>
</template>

<script>
import Hls from 'hls.js'
import flvjs from 'flv.js'

export default {
  name: 'VideoView',
  props: {
  },
  data() {
    return {
      url: null,
      loadTime: null,
      title: ''
    }
  },
  methods: {
    initVideo(url) {
      this.url = url
      this.loadTime = new Date().getTime()
      if (url.indexOf(".m3u8")>0) {
        if (Hls.isSupported()) {
          this.hls = new Hls()
          this.hls.loadSource(url)
          this.hls.attachMedia(this.$refs.video)
          this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
            console.log('加载成功')
            this.$refs.video.play()
          })
          this.hls.on(Hls.Events.ERROR, (event, data) => {
            console.log(event, data)
            console.log('加载失败')
          })
        }
      } else if (url.indexOf(".flv")>0){
        if (flvjs.isSupported()) {
          var videoElement = document.getElementById("videoElement");
          var flvPlayer = flvjs.createPlayer({

            type: 'flv',
            isLive: true,
            url: url //你的url地址
          })
          flvPlayer.attachMediaElement(videoElement)
          flvPlayer.load()
          flvPlayer.play()
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">


  .video-wrapper {
    border-radius: 6px !important;
    display: inline-block;
    margin-left: 5px;
    transition: all 0.6s ease-out;
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;

    video {
      transition: all 0.3s ease-out;
      height: 100%;
      width: 100%
    }

    .title {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.2);
      padding: 0 10px;
      color: white;
      line-height: 30px;
      width: 100%;
      height: 30px;
    }
  }

  .high-light {
    border: 4px solid #ff972d;
  }

  .not-high-light {
    border: 4px solid transparent;
  }

</style>
